<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      事件处理：
        语法：
          v-on:xx事件="handler"
          @xx事件="handler"
        handler: 事件处理器
          1. 内联事件处理器
            @click="count++"
          2. 方法事件处理器
            @click="methods中某个方法"
        事件对象：
          当我们使用 方法事件处理器 时，该处理器函数会自动收到一个 event (事件对象)

          当使用 内联事件处理器 时，该如何获取事件对象 ？？？
            1. 使用特殊的内置变量 $event 来主动传递事件对象
            2. 使用内联的箭头函数来传递 event 

        事件处理函数加括号调用与不加括号调用的区别：
          1. 不加括号调用，该处理函数叫做 方法事件处理器，会自动收到一个 事件对象的 参数
          2. 加括号调用，该处理函数叫做   内联事件处理器，收到的参数要看括号里面如何传递的。
        

     -->
    <div id="app">
      <!-- 一些简单的赋值之类的，可以直接写成 内联事件处理器 -->
      <button @click="count++">{{ count }}</button>

      <!-- 一些复杂的逻辑，要写成 方法事件处理器 -->
      <button @click="add">{{ count }}</button>

      <hr />
      <!-- 
        1. 内联事件处理器 ，没有传递参数，那么函数中收到的就是一个 undefined
      -->
      <button @click="fn1()">fn1</button>

      <button @click="fn2($event)">fn2</button>

      <button @click="(event) => fn3(event)">fn3</button>

      <button @click="fn4('张三', $event)">fn4 - 张三</button>
      <button @click="(event) => fn4('里斯',event)">fn4 - 里斯</button>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            count: 1,
          };
        },
        methods: {
          add(event) {
            console.log("event", event);
            if (this.count % 2 !== 0) {
              // 奇数，再 + 1
              this.count++;
            }
          },
          fn1(event) {
            console.log("fn1", event); // event undefined
          },
          fn2(event) {
            console.log("fn2", event); // evnet 事件对象
          },
          fn3(event) {
            console.log("fn3", event); // event 事件对象
          },
          fn4(message, event) {
            console.log("fn4", message, event);
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
